import React, { useState, useEffect } from 'react'
import { Form, Field, Dialog } from 'react-vant'
import { withRouter } from 'react-router';
function Reg1(props) {
    let { setFlag, setTelnum } = props
    const [tel, settel] = useState('')
    useEffect(() => {
        setTelnum(props.location.state)
        settel(props.location.state)
    }, [])

    return (
        <div>
            <div className='Regtitle'>
                手机号登录
            </div>
            <div className='inpbox'>
                <Form>
                    <Form.Item
                        name="text1"
                        label="国家/地区"
                    >
                        <Field readonly placeholder="中国大陆 （+86）" />
                    </Form.Item>
                    <Form.Item
                        name="text2"
                        label="手机号"
                        rules={[
                            {
                                validator: (_, value) => {
                                    if (/1\d{10}/.test(value)) {
                                        return Promise.resolve(true);
                                    }
                                    return Promise.reject(new Error('请输入正确的手机号码'));
                                },
                            },
                        ]}
                    >
                        <Field placeholder={props.location.state ? props.location.state : "请填写手机号码"} onChange={(e) => {

                            if (props.location.state) {
                                settel(props.location.state)
                                setTelnum(props.location.state)
                            } else {
                                settel(e)
                                setTelnum(e)
                            }
                        }} />
                    </Form.Item>
                </Form>
                <p onClick={() => {
                    setFlag(1)
                }}>
                    <span>用微信号</span>
                    <i>/</i>
                    <span>QQ号</span>
                    <i>/</i>
                    <span>邮箱登录</span>
                </p>
            </div>
            <div className='Btn_box'>
                <button onClick={() => {
                    if (/1\d{10}/.test(tel)) {
                        setFlag(2)
                    } else {
                        Dialog.alert({
                            title: '手机号码错误',
                            message: '输入的是一个无效的的手机号码',
                        }).then(() => {
                            // on close
                        });
                    }
                }}>下一步</button>
            </div>
        </div>
    )
}
export default withRouter(Reg1)